<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
<div id="app">
    <h1>插件讲解</h1>
    <a href="javascript:;" @click="get">GET请求</a>
    <a href="javascript:;" @click="post">POST请求</a>
    <a href="javascript:;" @click="jsonp">JSONP请求</a>


    <span>{{msg}}</span>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            msg: ''
        },
        methods: {
            get() {
                this.$http.get('../package.json', {
                    params: {
                        userId: '101'
                    },
                    headers: {
                        token: 'abcd'
                    }
                }).then(res => {
                    this.msg = res.data
                }, error => {
                    this.msg = res.data
                });
            },
            post() {
                this.$http.post('../package.json', {
                        userId: 333
                    }, {
                        headers: {
                            access_token: 'abcd'
                        }
                    }).then(function (res) {
                    this.msg = res.data
                 });
            },
            jsonp: function () {
                this.$http.jsonp("http://www.imooc.com/course/ajaxskillcourse?cid=796",{
                    params:{
                        userId:1001
                    },
                    uId:"jack"
                }).then(function (res) {
                    this.msg = res.data;
                });
            },
            http: function () {
                this.$http({
                    url:"package.json",
                    method:"POST",
                    params:{
                        userId:"000"
                    },
                    headers:{
                        token:"101"
                    }
                }).then(function (res) {
                    this.msg = res.data;
                })
            },
        }
    });
</script>

</body>
</html>